<template>
    <div class="totalDetail page">
        <formHeader :title="'总额明细'" :wColor="true"></formHeader>
        <div class="con">
            <div class="top">
                <div class="user">
                    <div class="userImg">
                        <img src="./image/usersImg.png" alt="">
                    </div>
                    <div class="desc">收款-来自clive</div>
                    <div class="cost">+999.00</div>
                </div>
                <div class="goods">
                    <div class="goodCell">
                        <div class="goodImg">
                            <img src="./image/goodImg.png" alt="">
                        </div>
                        <div class="desc">
                            <div class="goodName">
                                产品名称产品名称
                            </div>
                            <div class="goodModel">500ml</div>
                            <div class="bot">
                                <span class="money">￥999.00</span>
                                <span class="count">X1</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form">
                <div class="formCell">
                    <span class="name">收款方式</span>
                    <span class="word">订单支付</span>
                </div>
                <div class="formCell">
                    <span class="name">对方账户</span>
                    <span class="word">clive</span>
                </div>
                <div class="formCell">
                    <span class="name">创建时间</span>
                    <span class="word">2020-06-12  12:45:54</span>
                </div>
                <div class="formCell">
                    <span class="name">订单号</span>
                    <span class="word">566546513616516313164165416131</span>
                </div>
                <div class="formCell">
                    <span class="name">备注</span>
                    <span class="word">备注信息备注信息备注信息</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import formHeader from '@/components/form-header'
    export default {
        name : "totalDetail",
        components:{formHeader}
    }
</script>

<style scoped lang="stylus">
.totalDetail
    background-color $page-bg
    .con
        margin-top 47px
        .top
            margin-bottom 10px
            background-color #fff
            .user
                height 193px
                margin 0 28px
                color #333
                display flex
                flex-direction column
                justify-content center
                align-items center
                border-bottom 1px dashed #333
                img
                    width 40px
                    height 40px
                .desc
                    font-size 16px
                    margin-top 9px
                    margin-bottom 19px
                .cost
                    font-size 28px
                    font-family DIN
                    font-weight bold
            .goods
                padding 0 33px 15px 15px
                .goodCell
                    margin-top 15px
                    display flex
                    align-items center
                    img
                        width  65px
                        height 65px
                    .desc
                        flex 1
                        margin-left 11px
                        .goodName
                            color #333
                            font-size 13px
                            white-space nowrap
                            overflow hidden
                            text-overflow  ellipsis
                        .goodModel
                            color #999
                            font-size 11px
                            margin-top 9px
                            margin-bottom 14px
                        .bot
                            display flex
                            justify-content space-between
                            font-size 11px
                            color #00AB97
                            .money
                                font-weight bold
                            .count
                                color #333
        .form
            background-color #fff
            padding 15px 27px
            padding-bottom 0
            .formCell
                font-size 13px
                color #333333
                padding-bottom 15px
                .name
                    display inline-block
                    width 52px
                    color #999
                    margin-right 19px

</style>